<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			margin: 40px auto;
			background-color: hotpink;
			transform-origin: left bottom;
			transition: all 1s;
		}


		div:hover {
			transform: rotate(360deg)
		}
	</style>
</head>

<body>
	<h2>2D转换可以设置转换的中心点transform-origin</h2>
	<ul>
		<li>transform-origin:x y;</li>
		<li>注意后面的参数x和y用空格隔开</li>
		<li>x y默认转换的中心是元素的中心点(50% 50%)</li>
		<li>还可以给x y设置 像素 或者 方位名词(top right left bottom center)</li>

	</ul>
	<div></div>
</body>

</html>